<template>
  <div>
        <Dropdown  @on-click="clickMonth">
          <a style="font-size: 20px" href="javascript:void(0)">
            当前月份：{{this.month}}月
            <Icon type="ios-arrow-down"></Icon>
          </a>
          <DropdownMenu slot="list">
            <DropdownItem name="1">1月</DropdownItem>
            <DropdownItem name="2">2月</DropdownItem>
            <DropdownItem name="3">3月</DropdownItem>
            <DropdownItem name="4">4月</DropdownItem>
            <DropdownItem name="5">5月</DropdownItem>
            <DropdownItem name="6">6月</DropdownItem>
            <DropdownItem name="7">7月</DropdownItem>
            <DropdownItem disabled>8月</DropdownItem>
            <DropdownItem disabled>9月</DropdownItem>
            <DropdownItem disabled> 10月</DropdownItem>
            <DropdownItem disabled>11月</DropdownItem>
            <DropdownItem disabled name="12">12月</DropdownItem>
          </DropdownMenu>
        </Dropdown>



    <div id="lineChart" style="height: 600px;width: 1000px"></div>

  </div>
</template>

<script>
import * as echarts from 'echarts';
import {findByMonthDay, findWeatherByMonth} from "../../../http/request";
export default {
name: "index",
  data() {
    return {
      days: [],
      num: [],
      month: 1,
      weathers: [],
      max_tpt: [],
      min_tpt: [],
      weather_type: []
    }
  },
  mounted () {
    findByMonthDay(1).then(res => {
      for(let r in res.data) {
        this.days.push(String(res.data[r].day))
        this.num.push(res.data[r].num)
      }
      findWeatherByMonth('0'+this.month).then(res => {
        for (let r in res.data) {
            this.max_tpt.push(parseInt(res.data[r].max_tpt.replace('℃','').trim()))
            this.min_tpt.push(parseInt(res.data[r].min_tpt.replace('℃','').trim()))
            this.weather_type.push(res.data[r].weather_type)
        }
        console.log(this.min_tpt)
        console.log(this.max_tpt)
        this.lineChart()
      })
      // this.lineChart()
    })
    // this.lineChart()
  },
  methods: {
    lineChart() {
      let lineGraph = echarts.init(document.getElementById('lineChart'))
      lineGraph.setOption({
        color: [ '#91c7ae','#0026ff', '#ff0000'],
        title : {
          text: '',
          subtext: '',
          x:'center'
        },
        // 选天的时候 显示当天的信息
        tooltip: {
          trigger: 'axis'
        },
        legend:{
          data: ["人数", "最高温度", "最低温度"],
          textStyle: {fontSize: 16}
        },
        xAxis: {
          type: 'category',
          data: this.days
        },
        yAxis: [
          {
            name: '人数（人)',
            type: 'log',
            axisLabel: {
              formatter: '{value} 人'
            }
          },
          {
            name: '温度',
            type: 'value',
            max: Math.max(...this.max_tpt)+2,
            min: Math.min(...this.min_tpt)-2,
            axisLabel: {
              formatter: '{value} °C'
            }
          }
        ],
        series: [
          // 当天出行总人数
          {
            name: '人数',
          data: this.num,
          type: 'bar',
          yAxisIndex: 0,
          markPoint: {
            data: [
              {type: 'max', name: '最大值'},
              {type: 'min', name: '最小值'}
            ]
          },
          },
          // 最低气温
          {
            name: '最低温度',
            data: this.min_tpt,
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            markPoint: {
              data: [
                {type: 'min', name: '最小值'}
              ]
            },
          },
          // 最高气温
          {
            name: '最高温度',
            data: this.max_tpt,
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            markPoint: {
              data: [
                {type: 'max', name: '最大值'}
              ]
            },
          }
        ]
      })
    },
    clickMonth(name) {
      this.month = name
      findByMonthDay(name).then(res => {
        this.days = []
        this.num = []
        for(let r in res.data) {
          this.days.push(String(res.data[r].day))
          this.num.push(res.data[r].num)
        }
        findWeatherByMonth('0'+name).then(res => {
          this.max_tpt = []
          this.min_tpt = []
          for (let r in res.data) {
            this.max_tpt.push(parseInt(res.data[r].max_tpt.replace('℃','').trim()))
            this.min_tpt.push(parseInt(res.data[r].min_tpt.replace('℃','').trim()))
            this.weather_type.push(res.data[r].weather_type)
          }
          this.lineChart()
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
